<template>
    <div class="platformConsulting">
      <img src="../assets/retun.png" class="retun" @click="retun">
      <div class="platformConsulting-img">
        <img src="https://img2.baidu.com/it/u=1177152935,3027118618&fm=253&fmt=auto&app=138&f=JPEG?w=777&h=500" alt width="100%" height="100%" />
        <div class="title">
          <div class="title-start">政策解读</div>
        </div>
      </div>
      <div class="center">
        <div class="center-next" style="margin:10px 0px" v-for="(item, index) in list" :key="index" @click="togo(item.id, 'entrench')">
          <div class="center-next_details">
            
            <div class="center-text">
              <div style="display: flex; justify-content: space-between">
                <div class="center-title_text">{{ item.title }}</div>
               
              </div>
              <div class="center-text_next" v-html="item.content"></div>
            </div>
            <div>{{'暂无'}}</div>

          </div>
        </div>
      </div>
      <div class="block">
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="curPage"
          :page-size="pageSize"
          layout="total, prev, pager, next, jumper"
          :total="totalCount"
        ></el-pagination>
      </div>
    </div>
  </template>
  
  <script>
import {  poicylist,defendinfo } from '@/api/echarts'
  export default {
    name: 'PlatformConsulting',
    data() {
      return {
        list: [],
        curPage: 1,
        pageSize: 5,
        totalCount: 0,
      }
    },
    mounted() {
       this.dataList()
    },
  
    methods: {
      retun(){
        this.$router.go(-1)
      },
        dataList(){
            let data={
                pageNum: this.curPage,
                pageSize:this.pageSize,
            }
            poicylist(data).then(res=>{
            console.log("应急",res);
            if (res.code==200) {
                this.list=res.rows
                this.totalCount=res.total
            }
        })
        },
      togo(item,val) {
          this.$router.push({ name: 'policyparticulars', params: { id: item,val:val } })
      },
      handleSizeChange(val) {
        this.pageSize = val
       this.dataList()

      },
      handleCurrentChange(val) {
        this.curPage = val
       this.dataList()
      },
      
    }
  }
  </script>
  
  <style lang="less">
  .platformConsulting {
    .retun{
      position: fixed;
      width: 60px;
      height: 60px;
      top:20.25rem;
      left: 50px;
    }
    .platformConsulting-img {
      width: 100%;
      height: 19.25rem;
      margin-top: -0.3125rem;
      position: relative;
    }
    .title {
      font-family: Microsoft YaHei;
      color: #fff;
      position: absolute;
      left: 39%;
      top: 24.32%;
      .title-start {
        width: 14.125rem;
        height: 3.25rem;
        font-size: 3.25rem;
        font-weight: bold;
        margin-left: 15%;
      }
      .title-end {
        width: 24rem;
        height: 1.125rem;
        font-size: 1.125rem;
        font-weight: 400;
        margin-top: 3.4375rem;
      }
    }
    .center {
      width: 72.4%;
      margin: 0rem 15.21%;
      border-radius: 0.5rem;
      margin: 0 auto;
      margin-top: 1.6875rem;
      .center-next {
        cursor: pointer;
        width: 98%;
        padding: 1.8125rem 1.75rem 1.8125rem 1.75rem;
        border-radius: 0.5rem;
        border: 0.125rem solid #dddada;
        &:hover {
          border: 0.125rem solid #4f70f5;
        }
        .center-next_details {
          width: 100%;
        //   height: 10rem;
          display: inline-flex;
          .center-img {
            width: 18.75rem;
            height: 10rem;
            padding: 0;
            margin: 0;
          }
          .center-text {
            width: 77%;
            margin-left: 1.9375rem;
            margin-top: 1.0625rem;
            .center-title_text {
              display: inline-block;
              // width: 60%;
              height: 1.5rem;
              font-size: 1.5rem;
              font-family: Microsoft YaHei;
              font-weight: bold;
              color: #000000;
            }
            .center-title_image {
              display: inline-block;
              // width: 23%;
              height: 1.25rem;
              font-size: 1rem;
              font-family: Microsoft YaHei;
              font-weight: 400;
              color: #c0c0c0;
              text-align: right;
            }
            .center-text_next {
              width: 100%;
              height: 13.8%;
              font-size: 1rem;
              font-family: Microsoft YaHei;
              font-weight: 400;
              color: #666666;
              text-align: left;
              margin-top: 1.75rem;
              .quantity {
                display: inline-block;
                width: 2.8125rem;
                height: 0.8125rem;
                font-size: 1rem;
                font-family: Microsoft YaHei;
                font-weight: 400;
                color: #c0c0c0;
                margin-left: 0.625rem;
              }
            }
          }
        }
      }
      .center-add {
        display: flex;
        ._next {
          position: relative;
          top: 26px;
          width: 55px;
          z-index: 99;
          color: #c0c0c0;
        }
      }
    }
    .block {
      margin-bottom: 4rem;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-top: 4rem;
      .primary {
        width: 4.0625rem;
        height: 2rem;
        background: #4476ff;
        border-radius: 0.125rem;
        line-height: 0.625rem;
        margin-left: 0.625rem;
      }
    }
    .bottom-comment {
      width: 33%;
      height: 100px;
      margin: 0 auto;
    }
    .commentguest {
      width: 2em;
      height: 2em;
      top: 2.2em;
      position: relative;
    }
  
    .comment-input {
      font-family: '微软雅黑';
      font-size: 1.1em;
    }
    .commentarea {
      position: absolute;
      padding: 0.6em 1em;
      border: 0.1em solid black;
      background: #fff none repeat scroll 0 0;
      width: 34em;
      z-index: 2;
    }
  
    .commentbtn {
      border: 0 none;
      bottom: 2em;
      height: 3.3em;
      padding: 0;
      left: 0.1em;
      width: 33.9em;
      position: relative;
      transition: top 0.1s ease 0s;
    }
    .commentmask {
      border: 0 none;
      top: 2em;
      height: 100%;
      padding: 0;
      right: 0;
      width: 33.9em;
      background-color: #f4f5f6;
      position: relative;
      z-index: 1;
    }
    .getcomment {
      cursor: pointer;
      width: 6em;
      float: right;
      bottom: 1.2em;
      position: relative;
      width: 6.7em;
      height: 93%;
      z-index: 3;
      background-color: #3f404c;
      color: #fff;
      line-height: 2.9em;
      text-align: center;
      font-size: 1.1em;
      right: -40px;
    }
    .getcomment:hover {
      cursor: pointer;
      background-color: #ac2925;
      color: #fff;
    }
  }
  </style>
  